import React from 'react'
import './index.less'
import { NavBar, Icon, Button, Cell, Checkbox, IndexBar, } from 'react-vant';
import { connect } from "react-redux"
import action from '../../../../store/action';
import CellCom from "../../addressList/cell"
import { getData } from "../../../../api"
// 将汉字转成拼音插件
import { pinyin } from 'pinyin-pro';
const Initiate = (props) => {
    // 索引栏数据
    const [indexList] = React.useState(['⬆', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
    // type类型
    const [type] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'])

    const [check] = React.useState(0)

    // 筛选后的数据
    const [newData2, setnewData2] = React.useState([])
    // 本地信息
    const local = JSON.parse(localStorage.getItem('token'))
    // const [friendNum, setFriendNum] = React.useState()
    React.useEffect(async () => {
        let dataNew = await getData()
        let newArr = dataNew.friendData.filter(item => {
            return dataNew.infos.find(current => {
                if (local.info_id === item.fromId && current.info_id === item.toId && item.state == '0') {
                    item.info = current
                    return item
                }
            })
        })
        if (newArr.length === 0) {
            return false
        }

        // 获取声母
        let newData = newArr.map(item => {
            return {
                createdAt: item.createdAt,
                fromId: item.fromId,
                id: item.id,
                isBlacklist: item.isBlacklist,
                isOnlyChat: item.isOnlyChat,
                msg: item.msg,
                remark: item.remark,
                state: item.state,
                toId: item.toId,
                updatedAt: item.updatedAt,
                uuid: item.uuid,
                QRCode: item.info.QRCode,
                account: item.info.account,
                collect: item.info.collect,
                friendCircle: item.info.friendCircle,
                headPortrait: item.info.headPortrait,
                id: item.info.id,
                info_id: item.info.info_id,
                name: item.info.name,
                pass: item.info.pass,
                phoneNum: item.info.phoneNum,
                sex: item.info.sex,
                signature: item.info.signature,
                site: item.info.site,
                types: window.isNaN(Number(item.info.name.split(' ')[0])) ? item.info.name.split(' ')[0] : Number(item.info.name.split(' ')[0])
            }
        })
        let arr = newData.map(item => {
            let i = type.findIndex(ite => {
                return item.types === ite
            })
            return {
                createdAt: item.createdAt,
                fromId: item.fromId,
                id: item.id,
                isBlacklist: item.isBlacklist,
                isOnlyChat: item.isOnlyChat,
                msg: item.msg,
                remark: item.remark,
                state: item.state,
                toId: item.toId,
                updatedAt: item.updatedAt,
                uuid: item.uuid,
                QRCode: item.QRCode,
                account: item.account,
                collect: item.collect,
                friendCircle: item.friendCircle,
                headPortrait: item.headPortrait,
                id: item.id,
                info_id: item.info_id,
                name: item.name,
                pass: item.pass,
                phoneNum: item.phoneNum,
                sex: item.sex,
                signature: item.signature,
                site: item.site,
                types: i !== -1 ? type[i] : typeof item.types === 'number' ? String.fromCharCode(64 + parseInt(item.types)) : pinyin(item.name, { pattern: 'initial', type: 'array' })[0].slice(0, 1)
            }
        })
        let dataFriend = [
            { type: 'A', info: [] }, { type: 'B', info: [] }, { type: 'C', info: [] }, { type: 'D', info: [] }, { type: 'E', info: [] }, { type: 'F', info: [] }, { type: 'G', info: [] }, { type: 'H', info: [] }, { type: 'I', info: [] }, { type: 'J', info: [] }, { type: 'K', info: [] }, { type: 'L', info: [] }, { type: 'M', info: [] }, { type: 'N', info: [] }, { type: 'O', info: [] }, { type: 'P', info: [] }, { type: 'Q', info: [] }, { type: 'R', info: [] }, { type: 'S', info: [] }, { type: 'T', info: [] }, { type: 'U', info: [] }, { type: 'V', info: [] }, { type: 'W', info: [] }, { type: 'X', info: [] }, { type: 'Y', info: [] }, { type: 'Z', info: [] }
        ]
        arr.forEach(item => {
            item.types = item.types === 'a' || item.types === 'A' ? 'A' : (item.types === 'b' || item.types === 'B' ? 'B' : (item.types === 'c' || item.types === 'C' ? 'C' : (item.types === 'd' || item.types === 'D' ? 'D' : (item.types === 'e' || item.types === 'E' ? 'E' : (item.types === 'f' || item.types === 'F' ? 'F' : (item.types === 'g' || item.types === 'G' ? 'G' : (item.types === 'h' || item.types === 'H' ? 'H' : (item.types === 'i' || item.types === 'I' ? 'I' : (item.types === 'j' || item.types === 'J' ? 'J' : (item.types === 'k' || item.types === 'K' ? 'K' : (item.types === 'l' || item.types === 'L' ? 'L' : (item.types === 'm' || item.types === 'M' ? 'M' : (item.types === 'n' || item.types === 'N' ? 'N' : (item.types === 'o' || item.types === 'O' ? 'O' : (item.types === 'p' || item.types === 'P' ? 'P' : (item.types === 'q' || item.types === 'Q' ? 'Q' : (item.types === 'r' || item.types === 'R' ? 'R' : (item.types === 's' || item.types === 'S' ? 'S' : (item.types === 't' || item.types === 'T' ? 'T' : (item.types === 'u' || item.types === 'U' ? 'U' : (item.types === 'v' || item.types === 'V' ? 'V' : (item.types === 'w' || item.types === 'W' ? 'W' : (item.types === 'x' || item.types === 'X' ? 'X' : (item.types === 'y' || item.types === 'Y' ? 'Y' : (item.types === 'z' || item.types === 'Z' ? 'Z' : null)))))))))))))))))))))))))


            dataFriend.forEach(ite => {
                if (ite.type === item.types) {
                    ite.info.push(item);
                }
            })
        })
        setnewData2(dataFriend)
    }, [])
    //获取localstorage的登录信息
    let fromId = JSON.parse(localStorage.getItem('token'))
    const [qunliaoList] = React.useState([])
    const getFirend = (item) => {
        qunliaoList.push(item)
    }
    console.log(qunliaoList, '===');
    const [isCheced, setIsChecked] = React.useState(false)
    const toQunliao = () => {
        props.history.push({
            pathname:"/main/groupChat",
            state:qunliaoList
        })
    }
    return (
        <div className="InitiateBox">
            <header>
                <NavBar
                    title="选择联系人"
                    leftText="取消"
                    onClickLeft={() => {
                        //回退
                        props.history.go(-1)
                    }}
                />
                {/* main头部搜索 */}
                <div className="searchBox">
                    <Icon size="20" color="gray" name="search" />
                    <p>搜索</p>
                </div>
            </header>
            <main>
                <Cell title="选择一个群" isLink />
                <Cell title="面对面见群" isLink />
                <IndexBar indexList={indexList} sticky={false}>
                    {
                        newData2.map((item, index) => {
                            return <div key={index}> {
                                item.info.length !== 0 ? <IndexBar.Anchor index={item.type}>{item.type}</IndexBar.Anchor> : null
                            }
                                <div>
                                    {
                                        item.info.map((ite, ind) => {
                                            return <CellCom getFirend={() => {
                                                getFirend(ite)
                                                setIsChecked(!isCheced)
                                            }} isCheck={check} ischecked={isCheced} key={ind} img={ite.headPortrait} title={ite.remark !== undefined ? ite.remark : ite.name}></CellCom>

                                        })
                                    }
                                </div>
                            </div>

                        })
                    }
                </IndexBar>
            </main>
            {/* 发起群聊底部 */}
            <footer>
                <div>
                    {
                        qunliaoList.length > 0 ?<Button onClick={toQunliao} color="#05c160" size="small">完成</Button> : null
                    }
                </div>
            </footer>
        </div >
    )
}
export default connect(state => state.ymz, action)(Initiate)
